<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referer" content="never" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .preload {
        display: flex;
        flex-direction: column;
        height: 100%;
        letter-spacing: 1px;
        background-color: #2f3447;
      }

      .preload .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        user-select: none;
        flex-grow: 1;
      }

      .preload .name {
        font-size: 30px;
        color: #fff;
        letter-spacing: 5px;
        font-weight: bold;
      }

      .preload .title {
        color: #fff;
        font-size: 14px;
        margin-bottom: 10px;
      }

      .preload .sub-title {
        color: #ababab;
        font-size: 12px;
      }

      .preload .footer {
        text-align: center;
        padding: 10px 0 20px 0;
      }

      .preload .footer a {
        font-size: 12px;
        color: #ababab;
        text-decoration: none;
      }
	  .preload .loading {
				height: 30px;
				width: 30px;
				border-radius: 30px;
				border: 7px solid currentColor;
				border-bottom-color: #2f3447 !important;
				position: relative;
				animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
					bc 2s infinite ease-in;
				transform: rotate(0deg);
			}

			@keyframes r {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}

			.preload .loading::after,
			.preload .loading::before {
				content: "";
				display: inline-block;
				position: absolute;
				bottom: -2px;
				height: 7px;
				width: 7px;
				border-radius: 10px;
				background-color: currentColor;
			}

			.preload .loading::after {
				left: -1px;
			}

			.preload .loading::before {
				right: -1px;
			}

			@keyframes bc {
				0% {
					color: #689cc5;
				}

				25% {
					color: #b3b7e2;
				}

				50% {
					color: #93dbe9;
				}

				75% {
					color: #abbd81;
				}

				100% {
					color: #689cc5;
				}
			}
    </style>
	<% if(process.env.NODE_ENV!=='development' && htmlWebpackPlugin.options.cdns){ %>
      <% htmlWebpackPlugin.options.cdns.forEach(function(item){ if(item.js){ %>
        <script type="text/javascript" src="<%= item.js %>"></script>
      <% } }) %>
    <% } %>  
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app">
      <div class="preload">
        <div class="container">
          <p class="name">LARAVEL-VUE-ADMIN</p>
		  <div class="loading"></div>
          <p class="title">正在加载资源...</p>
          <p class="sub-title">初次加载资源可能需要较多时间，请耐心等待...</p>
        </div>

        <div class="footer">
          <a href="javascript:;" target="_blank">
          </a>
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
